<template>
	<view class="button-wrapper">
		<view class="button-container">
			<button @click="gotoPage('commonCheckIn')">普通签到</button>
			<text v-if="signTypeAm[0] !== 0" class="badge">{{signTypeAm[0]}}</text>
		</view>
		<view class="button-ccomontainer">
			<button @click="gotoPage('gestureCheckIn')">手势签到</button>
			<text v-if="signTypeAm[1] !== 0" class="badge">{{signTypeAm[1]}}</text>
		</view>
		<view class="button-container">
			<button @click="gotoPage('LocationCheckIn')">位置签到</button>
			<text v-if="signTypeAm[2] !== 0" class="badge">{{signTypeAm[2]}}</text>
		</view>
		<view class="button-container">
			<button @click="gotoPage('QRCodeCheckIn')">二维码签到</button>
			<text v-if="signTypeAm[3] !== 0" class="badge">{{signTypeAm[3]}}</text>
		</view>
		<view class="button-container">
			<button @click="gotoPage('signInCode')">签到码签到</button>
			<text v-if="signTypeAm[4] !== 0" class="badge">{{signTypeAm[4]}}</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		getImforComunt
	} from "@/request/init.js"
	import { onShow } from '@dcloudio/uni-app'
	const signInData = ref({})
	const signTypeAm = ref([0, 0, 0, 0, 0])
	const setTagBarAmount = async function() {
		let id = uni.getStorageSync("stuInfo").studentid
		await getImforComunt(id).then(res=>{
			signInData.value = res.data.data
			if(signInData.value.length==0){
				uni.removeTabBarBadge({
					index:0
				})
			}			
			else{
				uni.setTabBarBadge({
					index: 0,
					text: String(signInData.value.length)
				})
			}
		}).catch(err=>{
			console.log(err);
		})
		
		setInfoAmount();
	}
	onShow(()=>{
		setTagBarAmount()
		signTypeAm.value=[0, 0, 0, 0, 0];
	})
	
	const setInfoAmount = function() {
		for (let i of signInData.value) {
			switch (i.sessionType) {
				case "普通":
					signTypeAm.value[0]++;
					break;
				case "手势":
					signTypeAm.value[1]++;
					break;
				case "位置":
					signTypeAm.value[2]++;
					break;
				case "二维码":
					signTypeAm.value[3]++;
					break;
				case "签到码":
					signTypeAm.value[4]++;
					break;
			}
		}
	}
	const gotoPage=function(page){
		uni.navigateTo({
			url:"/pages/component/signComponent/"+page
		})
	}
</script>

<style lang="scss" scoped>
	.button-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		button {
			height: 150rpx;
			width: 300rpx;
			background: #31a8ff;
			font-family: inherit;
			padding: 0.6em 1.3em;
			font-weight: 900;
			font-size: 18px;
			border: 3px solid black;
			border-radius: 0.4em;
			box-shadow: 0.1em 0.1em;
			cursor: pointer;
			margin-top: 50rpx;
			margin-right: 10rpx;
		}

		button:hover {
			transform: translate(-0.05em, -0.05em);
			box-shadow: 0.15em 0.15em;
		}

		button:active {
			transform: translate(0.05em, 0.05em);
			box-shadow: 0.05em 0.05em;
		}

		.badge {
			position: absolute;
			top: 40rpx;
			right: -25rpx;
			background-color: red;
			color: white;
			font-size: 24rpx;
			font-weight: bold;
			padding: 6rpx 12rpx;
			border-radius: 50%;
		}
	}

	.button-container {
		position: relative;
		margin-bottom: 30rpx;
		display: inline-block;
	}
</style>